<template>
	<el-form ref="cuForm" size="mini" :model="cuForm" :rules="groupRelationRequestRules">
		<el-form-item class="bill_sale_form_item" label="销售单" prop="bill_sale_ids">
			<el-transfer v-loading="selectLoading" v-model="cuForm.bill_sale_ids" :titles="['所有销售单', '合成一组的销售单']"
				filterable :data="optionData">
				<span slot-scope="{ option }">
					<el-tooltip placement="top">
						<div slot="content">
							所属公司：{{ option.deptName }}<br />资源类型：{{ option.mediaTypeName }}<br />执行金额：{{ option.execute_amount }}
						</div>
						<div>{{ option.label }}</div>
					</el-tooltip>
				</span>
			</el-transfer>
			<div style="color: #F56C6C;margin-left: 60px" v-show="showTip">合成一组以后只能由财务修改,请认真选择后再提交</div>
		</el-form-item>
		<el-form-item label="分组名称" prop="name">
			<el-input v-model="cuForm.name" clearable style="width: 300px" placeholder="请输入分组名称">
			</el-input>
		</el-form-item>
	</el-form>
</template>

<script>
	import common from '@/utils/common.js';
	import {
		cloneDeep
	} from 'lodash';
	import {
		saleList,
		saleListInGroup
	} from '@/api/saleOrder/bill_sale_group'
	export default {
		name: 'sale-order-relation-group-edit-component',
		props: {
			showTip: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				selectLoading: false,

				optionData: [],

				cuForm: {
					name: null,
					customer_id: null,
					bill_sale_ids: [],
					edit_group_id: null,
				},

				groupRelationRequestRules: {
					name: [{
						required: true,
						message: '请输入分组名称',
						trigger: 'blur'
					}],
					group_id: [{
						required: true,
						message: '请选择分组',
						trigger: 'change'
					}]
				},
			}
		},
		watch: {},
		mounted() {},
		methods: {
			initThis(data) {
				this.optionData = [];
				this.cuForm = {
					name: data.edit_group_name || null,
					customer_id: data.customer_id || null,
					bill_sale_ids: data.bill_sale_ids || [],
					edit_group_id: data.edit_group_id || null,
				};
				this.getSales();
			},
			getSales(){
				const that = this;
				that.selectLoading = true;
				Promise.all([
					that.getSaleList(),
					that.getSaleListInGroup()
				]).then(results => {
					that.selectLoading = false;
					let outList = results[0] || [];
					let inList = results[1] || [];
					that.optionData = [...outList, ...inList];
					console.log(inList);
					that.cuForm.bill_sale_ids = inList.map(d => parseInt(d.key)) || [];
				}).catch(() => {
					that.selectLoading = false;
				});
			},
			// 没有分组的销售单
			getSaleList() {
				const that = this;
				return new Promise((resolve) => {
					if (!that.cuForm.customer_id) resolve([]);
					else {
						saleList({
							customer_id: this.cuForm.customer_id
						}).then(res => {
							resolve(res.data.map(item => {
								return {
									key: item.id,
									label: item.customerName + '——' +
										item.actual_execute_time_start + '~' +
										item.actual_execute_time_end,
									deptName: item.deptName,
									mediaTypeName: item.mediaTypeName,
									execute_amount: item.execute_amount
								}
							}) || []);
						}).catch(() => {
							resolve([]);
						});
					}
				});
			},
			// 分组内的销售单
			getSaleListInGroup() {
				const that = this;
				return new Promise((resolve) => {
					if (!that.cuForm.edit_group_id) resolve([]);
					else {
						saleListInGroup({
							group_id: that.cuForm.edit_group_id
						}).then(res => {
							resolve(res.data.map(item => {
								return {
									key: item.id,
									label: item.customerName + '——' +
										item.actual_execute_time_start + '~' +
										item.actual_execute_time_end,
									deptName: item.deptName,
									mediaTypeName: item.mediaTypeName,
									execute_amount: item.execute_amount
								}
							}) || []);
						}).catch(() => {
							resolve([]);
						});
					}
				});
			},
			getData() {
				const that = this;
				return new Promise((resolve) => {
					that.$refs.cuForm.validate(valid => {
						if (valid) {
							if ((!that.cuForm.bill_sale_ids || that.cuForm.bill_sale_ids.length === 0)) {
								common.messageError('请选择至少一个销售单');
								resolve(null);
							} else {
								resolve({
									edit_group_id: this.cuForm.edit_group_id || null,
									name: this.cuForm.name || null,
									bill_sale_ids: this.cuForm.bill_sale_ids || []
								});
							}
						} else {
							resolve(null);
						}
					});
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	/deep/ .bill_sale_form_item .el-form-item__label:before {
		content: "*";
		color: #F56C6C;
		margin-right: 4px;
	}
</style>
